<!-- 人员列表 -->
<template>
  <div class="strategy">
    <div class="search">
      <el-row
        :gutter="20"
        style=" display: flex; align-items: center;width: 100%;"
      >
        <el-col :span="2"><div class="grid-content bg-purple"><span>人员搜索：</span></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"> <el-input v-model="input" placeholder="请输入内容" /></div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple"><span>角色：</span></div></el-col>
        <el-col :span="4">  <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select></el-col>
        <el-col :span="12"><div class="grid-content bg-purple"> <el-button type="primary" icon="el-icon-search" @click="searchFn">搜索</el-button></div></el-col>
      </el-row>
    </div>
    <div
      style="padding: 20px 15px 19px 17px;
    background-color: #fff;"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="userName"
          label="人员名称"
          width="180"
        />
        <el-table-column
          prop="roleName"
          label="角色"
        />
        <el-table-column
          prop="mobile"
          label="联系电话"
        />
        <el-table-column
          prop="workCount"
          label="完成工单（本月）"
        />
        <el-table-column
          prop="progressTotal"
          label="进行中工单"
        />
        <el-table-column
          prop="cancelCount"
          label="拒绝工单"
        />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      title="人员详情"
      width="630px"
    >
      <el-header>
        <span>人员名称：{{ userMessage.userName }}</span>
        <span>角色：{{ userMessage.roleName }}</span>
        <span>联系电话：{{ userMessage.mobile }}</span>
        <span>负责区域：{{ userMessage.regionName }}</span>
      </el-header>
      <el-main>
        <el-table
          :data="userMessageTable"
          border
          style="width: 100%"
        >
          <el-table-column
            type="index"
            :index="indexMethod"
            width="80"
          />
          <el-table-column
            prop="total"
            label="工单总数"
            width="80"
          />
          <el-table-column
            prop="cancelCount"
            label="拒绝工单"
            width="80"
          />
          <el-table-column
            prop="workCount"
            label="完成工单"
            width="80"
          />
          <el-table-column
            prop="progressTotal"
            label="进行中工单"
          />
        </el-table>
      </el-main>
    </el-dialog>

  </div>
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { GetUserWorkAPI, GetUserWorkNumAPI, updateUserAPI } from '@/api/user-work'
import dayjs from '@/utils/dayjs'
export default {
  name: 'PersonnelList',
  components: {},
  props: {
  },
  data() {
    return {
      options: [{
        value: false,
        label: '运营员'
      }, {
        value: true,
        label: '维修员'
      }],
      value: '',
      input: '',
      tableData: [],
      dialogVisible: false,
      roleArr: [],
      regionArr: [],
      userMessage: {},
      userMessageTable: [],
      userMessageDay: {},
      userMessageWeek: {},
      userMessageYear: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.GetUserWork()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    indexMethod(id) {
      console.log(id)
      if (id === 0) {
        return '本周'
      } else if (id === 1) {
        return '本月'
      } else {
        return '本年'
      }
    },
    async GetUserWork() {
      const { data } = await GetUserWorkAPI({
        pageIndex: 1,
        pageSize: 100
      })
      // console.log(data)
      this.tableData = data.currentPageRecords
    },
    async searchFn() {
      const { data } = await GetUserWorkAPI({
        pageIndex: 1,
        pageSize: 100,
        userName: this.input,
        isRepair: this.value
      })
      // console.log(data)
      this.tableData = data.currentPageRecords
    },
    async handleEdit(index, row) {
      this.userMessageTable = []
      this.dialogVisible = true
      // console.log(this.dialogVisible)
      const { data } = await updateUserAPI(row.userId)
      // console.log(data)
      this.userMessage = data
      const resDay = await GetUserWorkNumAPI({
        userId: row.userId,
        start: dayjs().subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      const resWeek = await GetUserWorkNumAPI({
        userId: row.userId,
        start: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      const resYear = await GetUserWorkNumAPI({
        userId: row.userId,
        start: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
        end: dayjs().format('YYYY-MM-DD HH:mm:ss')
      })
      this.userMessageTable.push(resDay.data, resWeek.data, resYear.data)
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.search{
    display: flex;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
}
.image{
  width: 76px;
    height: 76px;
    margin: 4px;
    display: block;
    object-fit: contain;
}
.common-upload {
  ::v-deep .el-upload {
    position: relative;
    overflow: hidden;
    background: #f3f6fb;
    border: 1px dashed #d8dde3;
    border-radius: 4px;
    cursor: pointer;
}
}
::v-deep .el-select  {
    width: 100%;
}
::v-deep .el-dialog__footer{
  text-align: center;
      display: flex;
    align-items: center;
    justify-content: center;
}
.el-button--secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
.el-button--primary1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
}
</style>
